<script setup lang="ts">
import HmXxx from '@/views/PlayGround/components/hm-xxx.vue'
import HmLogin from '@/views/PlayGround/components/hm-login.vue'
import HmLayout from '@/views/PlayGround/components/hm-layout.vue'
import { ref } from 'vue'
// history    pushState    popstate
const routes = [
  {
    path: '/layout',
    component: HmLayout
  },
  {
    path: '/login',
    component: HmLogin
  },
  {
    path: '/xxx',
    component: HmXxx
  }
]
let current = ref<any>(HmLayout)
const push = (url: string) => {
  history.pushState(null, '', url)
  const findItem = routes.find(item => item.path === url)
  current.value = findItem?.component
}
window.addEventListener('popstate', () => {
  console.log('前进或者后退', location.pathname)
  const findItem = routes.find(item => item.path === location.pathname)
  current.value = findItem?.component
})
</script>

<template>
  <div class="app-page">
    <van-button @click="push('/layout')">layout</van-button>
    <van-button @click="push('/login')">login</van-button>
    <van-button @click="push('/xxx')">xxx</van-button>
    <!-- 动态组件 -->
    <div>
      <component :is="current"></component>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
